<template>
	<div
		class="doc_pc_components_Menu"
	>
		<div class="doc-container">
			<Menu
				ref="menuRef"
				obj-key="id"
				:data="data"
				:lazy-load="lazyLoad"
				:before-active="beforeActive"
				class="doc-menu"
			>
				<template #item-custom="{value}">
					{{value}}--自定义插槽
				</template>
			</Menu>
			<Menu
				obj-key="id"
				active="60id"
				arrow-icon="bi-caret-down-fill"
				loading-type="dot"
				:data="data"
				:lazy-load="lazyLoad"
				class="doc-menu"
			>
				<template #item-custom="{value}">
					{{value}}--自定义插槽
				</template>
			</Menu>
			<Menu
				obj-key="id"
				:data="data"
				:lazy-load="lazyLoad"
				class="doc-menu"
			>
				<template #loading>加载中</template>
				<template #arrow="{item}">{{item.expanded?'折叠':'展开'}}</template>
				<template #item-custom="{value}">
					{{value}}--自定义插槽
				</template>
			</Menu>
		</div>
		<div class="doc-opt">
			<Button @click="clickFn1">获取展开行</Button>
			<Input
				v-model="toId"
				class="doc-input"
			/>
			<Button @click="clickFn2">展开并滚动到节点</Button>
			<Button @click="clickFn3(true)">展开全部</Button>
			<Button @click="clickFn3(false)">折叠全部</Button>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Menu,Button,Input} from 'powerful-ui/pc-default';

const menuRef=shallowRef(null);
const toId=shallowRef('');

let id=0;
function build(sizeList,pre=''){
	if(sizeList.length){
		const size=sizeList[0];
		const list=new Array(size);
		const nextSizeList=sizeList.slice(1);
		for(let i=0;i<size;++i){
			list[i]={id:++id+'id',label:`菜单${pre}-${i}`,children:build(nextSizeList,`${pre}-${i}`)};
		}
		return list;
	}
	return [];
}
const data=build([10,10]);
Object.assign(data[1].children[0],{
	label:'跳转百度',
	href:'https://www.baidu.com/',
});
data[0]._lazy=true;
data[1]._expand=true;
data[1].children[1]._slot='custom';
data[1].children[2]._disabled=true;
data[2]._expandable=false;

function lazyLoad(meta){
	console.log('开始懒加载',meta);
	return new Promise((resolve) => {
		setTimeout(resolve,2000,meta.raw.children);
	});
}

function beforeActive(data){
	console.log('beforeActive',data);
}

function clickFn1(){
	console.log('展开行',menuRef.value.getExpanded({}));
}
function clickFn2(){
	menuRef.value.scrollTo({
		keyOrRaw:toId.value,
	});
}
function clickFn3(state){
	menuRef.value.setExpandsAll({state});
}
</script>

<style lang="scss">
.doc_pc_components_Menu{
	display:inline-block;
	.doc-container{
		display:flex;
	}
	.doc-menu{
		margin:20px;
		background:#fff;
		height:400px;
		width:200px;
	}
	.doc-opt{
		margin:20px;
	}
	.doc-input{
		width:100px;
	}
}
</style>